<template>
  <div id="blogdetail">
    <HeaderItem></HeaderItem>
    <TitleItem :title="title" :title2="title2"></TitleItem>
    <div class="bigbox">
      <div class="big">
        <div class="leftbox">
          <div class="fast">
            <img src="../assets/images/hangkong1.png" alt="" class="fastimg" />
            <div class="fastbot">
              <p class="fasttime">23 2015月， >/ 按管理员</p>
              <p class="fasttit">最快的运输服务</p>
              <p class="fasttext">
                Lorem
                psum的段有许多变体，但大多数都遭受了某种形式的改变，通过注入幽默或看起来甚至不可信的随机单词，如果你打算使用Lorem
                lpsum的一段话，你需要确保文本中间没有隐藏任何令人尴尬的东西。
              </p>
              <p class="fasttext1">
                互联网上的所有Lorem
                psum生成都倾向于根据需要重复预定义的块，使其成为互联网上第一个真正的生成器。它使用超过200个拉丁单词的字典，结合一些模型句子结构，生成看起来合理的Lorem
                lpsum。因此，生成的Lorem
                ipsum始终没有重复，注入幽默或非特征词等。
              </p>
              <div class="fastson">
                <img src="../assets/page/what.png" alt="" class="img" />
                <div class="fastsonright">
                  <p class="fasttext">
                    在最佳渠道之后协同增长最佳总链接。在股权投资渠道之后不断重新定义B2C方法论。大幅推动及时带宽，而不是企业潜力。可信地促进新兴的利基市场，而以用户为中心的”开箱即用”思维。客观地部雪可靠的社区，以实现整体网络准备。套观地部署可靠的社区，以实现整体网络准备
                  </p>
                  <p class="fasttext1">
                    Lorem
                    Ipsum的殷落有许多变体，但大多数都遭受了某种形式的改变，通过注入幽默或看起来甚至不可信的随机单词.
                  </p>
                </div>
              </div>
              <p class="fasttext1">
                可信地促进新兴的利基市场，而以用户为中心的“开箱即用“思维。客观地部署可靠的社区，以实现整体网络准备。客观地部警可靠的社区，以实现整体网络准备。因此，生成的Lorem
                ipsum始终没有重复等
              </p>
              <p class="fasttext2">
                在最佳渠道之后协同增长最佳总链接。在股权投资渠道之后不断重新定义B2C方法论。大幅推动及时带宽，而不是企业潜力。
              </p>
              <div class="fastson">
                <div class="fastsonright">
                  <p class="fasttext">
                    在最佳渠道之后协同增长最佳总链接。在股权投资渠道之后不断重新定义B2C方法论。大幅推动及时带宽，而不是企业潜力。可信地促进新兴的利基市场，而以用户为中心的”开箱即用”思维。客观地部雪可靠的社区，以实现整体网络准备。套观地部署可靠的社区，以实现整体网络准备
                  </p>
                  <p class="fasttext1">
                    Lorem
                    Ipsum的殷落有许多变体，但大多数都遭受了某种形式的改变，通过注入幽默或看起来甚至不可信的随机单词.
                  </p>
                </div>
                <img src="../assets/page/what.png" alt="" class="img" />
              </div>
            </div>
          </div>
          <div class="author">
            <img src="../assets/page/toux.png" alt="" class="img" />
            <div class="authorleft">
              <p class="aouthorname">作者简介</p>
              <p class="authortext">
                Lorem ipsum dolor sit amet, nsectetur adipiscing elit.Ut non
                libero magna.Sed et quamlacus.Fusce condimentum eleifend enim a
                feugiat.eleifend enim a feugiat.Sed et quamlacus.Fusce
                condimentum eleifend enim a feugiat.
              </p>
            </div>
          </div>
          <div class="articlebox">
            <h4>相关文章</h4>
            <div class="articleimg">
              <div class="artimg">
                <img src="../assets/page/bg_col.png" alt="" class="img" />
                <div class="arttext">
                  <p style="color: #d3d3ce">23 2015月，《》/按管理员</p>
                  <p>无壁白板资源最大化渠道</p>
                </div>
              </div>
              <div class="artimg">
                <img src="../assets/page/bg_col.png" alt="" class="img" />
                <div class="arttext">
                  <p style="color: #d3d3ce">23 2015月，《》/按管理员</p>
                  <p>无壁白板资源最大化渠道</p>
                </div>
              </div>
              <div class="artimg">
                <img src="../assets/page/bg_col.png" alt="" class="img" />
                <div class="arttext">
                  <p style="color: #d3d3ce">23 2015月，《》/按管理员</p>
                  <p>无壁白板资源最大化渠道</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 评论 -->
          <div class="comment">
            <h4>评论</h4>
            <div class="combox">
              <img src="../assets/page/toux.png" alt="" class="comimg" />
              <div class="comline">
                <p style="color: #3c313f">王怀泳</p>
                <p style="color: #bebebe">
                  一月25，2015 9：00 上午
                  <span style="color: #689bbe">回复</span>
                </p>
              </div>
              <p class="comtext">
                逐步协商可持续的 We
                就绪性，而不是可互操作的价值。在扩大一系列利益后，不断发挥广泛的协同作用。通过大
                流行的必要性有效地彻底改变磁性工艺改进。
              </p>
            </div>

            <div class="combox1">
              <img src="../assets/page/toux.png" alt="" class="comimg" />
              <div class="comline">
                <p style="color: #3c313f">王怀泳</p>
                <p style="color: #bebebe">
                  一月25，2015 9：00 上午
                  <span style="color: #689bbe">回复</span>
                </p>
              </div>
              <p class="comtext">
                逐步协商可持续的 We
                就绪性，而不是可互操作的价值。在扩大一系列利益后，不断发挥广泛的协同作用。通过大
                流行的必要性有效地彻底改变磁性工艺改进。
              </p>
            </div>

            <div class="combox">
              <img src="../assets/page/toux.png" alt="" class="comimg" />
              <div class="comline">
                <p style="color: #3c313f">王怀泳</p>
                <p style="color: #bebebe">
                  一月25，2015 9：00 上午
                  <span style="color: #689bbe">回复</span>
                </p>
              </div>
              <p class="comtext">
                逐步协商可持续的 We
                就绪性，而不是可互操作的价值。在扩大一系列利益后，不断发挥广泛的协同作用。通过大
                流行的必要性有效地彻底改变磁性工艺改进。
              </p>
            </div>
          </div>
          <!-- 评论 -->
          <!-- 添加评论 -->
          <div class="addcom">
            <h4>添加评论</h4>
            <p style="color: #c0c3c2">
              电子邮件地址将不会发布。必填字段标记为*
            </p>
            <FormItem></FormItem>
          </div>
          <!-- 添加评论 -->
        </div>
        <!-- 右侧盒子 -->
        <div class="rightbox">
          <div class="rightinput">
            <input type="text" placeholder="搜索" style="border: none" />
            <div class="search">
              <img src="../assets/images/search.png" alt="" class="searchimg" />
            </div>
          </div>
          <div class="option">
            <div class="optiontitbox">
              <p class="optiontit1" @click="activeTab = 'tab1'">最近的帖子</p>
              <p class="optiontit2" @click="activeTab = 'tab2'">阅读次数最多</p>
            </div>
            <div class="posts1" v-show="activeTab === 'tab1'">
              <img
                src="../assets/page/blog_list_03.png"
                alt=""
                style="
                  width: 20%;
                  height: 10%;
                  margin-top: 20px;
                  margin-right: 20px;
                "
              />
              <div>
                <p style="color: #747b80">
                  通过潜在的变革催化剂无缝地实现白板资源最大化渠道。
                </p>
                <p style="color: #cdcdd1">23 2015月，/按管理员</p>
              </div>
            </div>
            <div class="posts1" v-show="activeTab === 'tab1'">
              <img
                src="../assets/page/blog_list_03.png"
                alt=""
                style="
                  width: 20%;
                  height: 10%;
                  margin-top: 20px;
                  margin-right: 20px;
                "
              />
              <div>
                <p style="color: #747b80">
                  通过潜在的变革催化剂无缝地实现白板资源最大化渠道。
                </p>
                <p style="color: #cdcdd1">23 2015月，/按管理员</p>
              </div>
            </div>
            <div class="posts2" v-show="activeTab === 'tab2'">456</div>
          </div>
          <div class="cate">
            <p class="catetit">博客类别</p>
            <ul>
              <li>灵感</li>
              <li>生活方式</li>
              <li>我的活动</li>
              <li>旅行</li>
              <li>科技</li>
              <li>教育</li>
              <li>未分类</li>
            </ul>
          </div>
          <div class="cate">
            <p class="catetit">存档</p>
            <ul>
              <li>2014年《》月(3)</li>
              <li>2014年《》月(1)</li>
              <li>2012年《》月(5)</li>
              <li>2012年《》月(3)</li>
              <li>2011年《》月(2)</li>
              <li>2010年《》月(2)</li>
            </ul>
          </div>
          <div class="sign">
            <p class="signtit">标记云</p>
            <div class="signcent">
              <div class="signone">习惯</div>
              <div class="signone">图形</div>
            </div>
          </div>
          <div class="sum">
            <img
              src="../assets/imagesfd/twitter.png"
              alt=""
              style="width: 10%; height: 10%"
            />
            推特提要
          </div>
          <div class="photo">
            <p class="phototit">闪烁照片</p>
            <div class="photobox">
              <img src="../assets/page/toux.png" alt="" style="width: 30%" />
              <img src="../assets/page/toux.png" alt="" style="width: 30%" />
              <img src="../assets/page/toux.png" alt="" style="width: 30%" />
              <img src="../assets/page/toux.png" alt="" style="width: 30%" />
              <img src="../assets/page/toux.png" alt="" style="width: 30%" />
              <img src="../assets/page/toux.png" alt="" style="width: 30%" />
            </div>
          </div>
        </div>
        <!-- 右侧盒子 -->
      </div>
    </div>
    <FooterItem></FooterItem>
  </div>
</template>

<script>
import HeaderItem from "../components/HeaderItem.vue";
import FooterItem from "../components/FooterItem.vue";
import TitleItem from "../components/TitleItem.vue";
import FormItem from "../components/FormItem.vue";
export default {
  components: {
    HeaderItem,
    FooterItem,
    TitleItem,
    FormItem
  },
  data() {
    return {
      title: "博客",
      title2: "家/博客",
      activeTab: "tab1",
      worldlist: [
        {
          time: "23 2015月， >/ 按管理员",
          tit: "运往世界各地",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
        {
          time: "23 2015月， >/ 按管理员",
          tit: "协同并行",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
        {
          time: "23 2015月， >/ 按管理员",
          tit: "最大的集装箱",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
        {
          time: "23 2015月， >/ 按管理员",
          tit: "最先进的运输",
          text: " 积极为以目标为导向的信息中介创建长期高影响力的内容。 使用高效场景动态定制高效涡流.",
        },
      ],
    };
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.bigbox {
  width: 100%;
  background-color: #f7f7f7;
}
.big {
  width: 65%;
  margin: auto;
  padding-top: 100px;
  padding-bottom: 150px;
  display: flex;
  justify-content: space-between;
}
/* 左侧盒子 */
.leftbox {
  width: 74%;
}
.fastbot {
  padding: 40px 50px;
  box-sizing: border-box;
  background-color: white;
}
.fastimg {
  width: 100%;
}
.fasttime {
  color: #bfc4c3;
}
.fasttit {
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}
.fasttext {
  color: #949399;
  line-height: 30px;
}
.fasttext1 {
  color: #949399;
  line-height: 30px;
  margin: 30px 0;
}
.fastson {
  display: flex;
  margin-top: 30px;
}
.fastsonright {
  padding: 0 20px;
}
.fasttext2 {
  border-left: solid 5px black;
  padding-left: 20px;
  box-sizing: border-box;
  color: #949399;
}
.author {
  margin-top: 60px;
  display: flex;
  background-color: white;
}
.authorleft {
  padding: 24px 32px;
  box-sizing: border-box;
  color: #3f4244;
}
.aouthorname {
  font-size: 22px;
  margin-bottom: 22px;
}
.articlebox {
  width: 100%;
  margin-top: 70px;
}
.articleimg {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.artimg {
  position: relative;
}
.arttext {
  position: absolute;
  right: 10px;
  bottom: 32px;
  z-index: 999;
}
/* 评论 */
.comment > h4 {
  margin: 70px 0 30px 0;
}
.combox {
  margin-top: 60px;
  padding: 30px;
  position: relative;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
}
.combox1 {
  margin-top: 80px;
  padding: 30px;
  position: relative;
  background-color: white;
  width: 82%;
  margin-left: 16%;
  box-sizing: border-box;
}
.comline {
  margin-left: 16%;
  width: 80%;
  justify-content: space-between;
  display: flex;
}
.comimg {
  width: 10%;
  position: absolute;
  top: -40px;
  left: 30px;
}
.comtext {
  margin-top: 20px;
  color: #707375;
}
/* 评论 */
/* 添加评论 */
.addcom {
  margin-top: 70px;
}
/* 添加评论 */

/* 左侧盒子 */
/* 右侧盒子 */
.rightbox {
  width: 22%;
}
.rightinput {
  display: flex;
}
.search {
  width: 10%;
  height: 10%;
  background-color: #1c89dc;
}
.searchimg {
  width: 100%;
  height: 100%;
}
.option {
  width: 100%;
  margin-top: 40px;
}
.optiontitbox {
  display: flex;
  padding-bottom: 20px;
  border-bottom: solid 4px white;
}
.optiontit1 {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.optiontit1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: solid #4485ae 4px;
}
.optiontit2 {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.optiontit2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  border-bottom: solid #4485ae 4px;
}
.posts1 {
  display: flex;
  margin-top: 20px;
}
.catetit {
  margin: 56px 0 36px 0;
}
.cate > ul > li {
  margin-bottom: 30px;
}
.sign {
  margin-top: 30px;
}
.signcent {
  display: flex;
}
.signone {
  margin-top: 30px;
  padding: 5px 10px;
  background-color: white;
  margin-right: 20px;
  border-radius: 20px;
}
.sum {
  margin-top: 50px;
}
.phototit {
  margin-top: 45px;
  margin-bottom: 28px;
}
.photobox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.photobox > img {
  margin: 2px;
}
/* 右侧盒子 */

/* 响应1024px */
@media screen and (max-width: 1024px) {
  .big {
    width: 100%;
    display: block;
  }
  .leftbox {
    width: 100%;
  }
  .rightbox {
    width: 100%;
  }
  .rightinput {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    width: 100%;
  }
}
/* 响应768px */
@media screen and (max-width: 1024px) {
  .world {
    display: block;
  }
  .worldson {
    width: 100%;
  }
  .fastbot{
    padding: 10px;
  }
  .fasttit{
    font-size: 20px;
  }
  .fastson{
    display: block;
  }
  .author{
    display: block;
  }
  .articleimg{
    display: block;
  }
  .img{
    width: 100%;
  }
  .arttext{
    display: none;
  }
 
}
</style>